<template>
    <div class="common-layout">
        <el-container>
            <el-header>

                <el-menu class="el-menu-demo" mode="horizontal" :ellipsis="false" background-color="#343090"
                    text-color="#F9F8EB" active-text-color="#002447">

                    <el-menu-item index="0" @click="toSystemIndex">
                        <img alt="Blog logo" src="@/assets/blogLogo.png" width=160 height=50>
                    </el-menu-item>

                    <div class="flex-grow" />

                    <el-menu-item index="0">
                        关于站主
                    </el-menu-item>

                    <el-menu-item index="1" @click="dialogVisible = true">


                        <div @click="feedbackDialogVisible = true">
                            问题反馈
                        </div>

                        <el-dialog v-model="feedbackDialogVisible" title="问题反馈" width="30%" destroy-on-close center
                            :close-on-click-modal="false" :show-close="false">
                            <div>
                                反馈的问题：
                                <el-input name="feedbackElInput" v-model="textarea" maxlength="50"
                                    placeholder="请输入要反馈的问题，不超过50字" show-word-limit type="textarea"/>
                            </div>
                            <div>
                                联系的邮箱：
                                <el-input v-model="input" placeholder="Please input" />
                            </div>
                            <template #footer>
                                <span class="dialog-footer">
                                    <el-button @click="feedbackDialogVisible = false">取消</el-button>
                                    <el-button type="primary" @click="feedbackDialogVisible = false">
                                        确认
                                    </el-button>
                                </span>
                            </template>
                        </el-dialog>

                    </el-menu-item>
                    <el-menu-item index="2">
                        我要发表
                    </el-menu-item>
                    <el-sub-menu index="3">
                        <template #title>
                            {{ this.user.fullname }}
                            个人中心
                            <div class="demo-type">
                                <el-avatar
                                    src="https://img0.baidu.com/it/u=3495979613,232867632&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400" />
                            </div>
                        </template>
                        <el-menu-item index="2-1">我的文章</el-menu-item>
                        <el-menu-item index="2-2">我的收藏</el-menu-item>
                        <el-menu-item index="2-3">浏览历史</el-menu-item>
                        <el-sub-menu index="2-4">
                            <template #title>我的钱包</template>
                            <el-menu-item index="2-7-1">余额：{{ this.user.money }} F币</el-menu-item>
                        </el-sub-menu>

                        <el-sub-menu index="2-5">
                            <template #title>设置</template>
                            <el-menu-item index="2-6-1">退出登录</el-menu-item>
                        </el-sub-menu>
                    </el-sub-menu>
                </el-menu>

            </el-header>
            <el-main>
                <el-row :gutter="24">
                    <el-col :span="2">
                        
                    </el-col>
                    <el-col :span="4">

                            <div class="left-notice">
                                <el-collapse accordion>
                                    <el-collapse-item title="● F-Blog氢客是什么" name="1">
                                        <div>
                                            这是一个专门发表博客的网站。你可以在里面分享你的知识给其他小伙伴们一起进步。
                                        </div>
                                    </el-collapse-item>
                                    <el-collapse-item title="● 我要联系氢客作者" name="2">
                                        <div>
                                            QQ: 1292492939<br>
                                            Bilibili: 格啦个格
                                        </div>
                                    </el-collapse-item>
                                    <el-collapse-item title="● 怎么发表帖子" name="3">
                                        <div>
                                            暂时不能发帖
                                        </div>
                                    </el-collapse-item>
                                    <el-collapse-item title="● 给氢客社区贡献力量" name="4">
                                        <div>
                                            暂时不能贡献
                                        </div>
                                    </el-collapse-item>
                                </el-collapse>
                            </div>

                    </el-col>
                    <el-col :span="12" name="el-col-12">
                        <div class="grid-content ep-bg-purple">

                            <el-carousel :interval="5000" arrow="always">
                                <el-carousel-item v-for="item in navigationImageList" :key="item.id">
                                    <img style="object-fit: scale-down;width:100%;height:100%;" :src="item.idView"
                                        class="image" />
                                </el-carousel-item>
                            </el-carousel>

                            <el-table :data="userList" style="width: 100%">
                                <el-table-column prop="profilePhoto" label="头像">
                                    <el-avatar :size="30"> S </el-avatar>
                                    </el-table-column>
                                    <el-table-column prop="fullname" label="用户" />
                                    <el-table-column prop="level" label="等级" />
                                    <el-table-column prop="recentUpdateDate" label="最近更新" />
                                    <el-table-column prop="blogIndex" label="博客主页">
                                        <el-button round>➡️</el-button>
                                    </el-table-column>
                                    </el-table>
                                    <br>
                                    <ul v-for="blog in blogList" :key="blog.id" class="newsBlog" align="left">
                                        <div class="newsBlog-layout">
                                            <br>
                                            <el-container class="newsBlog-container" style="background-image: linear-gradient(to top, #FFFFFF 0%, #FDFDFD 100%);height: 200px;">
                                                <el-header style="background-color: #ffbb33;">
                                                    <div style="font-size:14px;font-weight:bolder;color:whitesmoke" >
                                                        <el-avatar :size="30"> S </el-avatar>
                                                        {{ blog.user.fullname }}
                                                        <div style="font-size:13px;color:white;font-weight:normal" align="left">
                                                            <span style="color:black;font-size:17px;font-weight:bold">
                                                            {{ blog.title }}&emsp;
                                                        </span>
                                                            <span align="right">
                                                                发布于：{{ blog.publish_time }}
                                                            </span>
                                                        </div>

                                                    </div>
                                                </el-header>
                                                <el-main>
                                                    <div style="font-size:14px;color:black;font-weight:normal;">
                                                        {{ blog.content }}
                                                        </div>
                                                </el-main>
                                                <el-footer height="35px">
                                                    <div style="font-size:14px;color:black;font-weight:normal">
                                                        👍
                                                        <span>
                                                            💬
                                                        </span>
                                                    </div>
                                                </el-footer>
                                            </el-container>
                                        </div>
                                    </ul>
                        </div>
                    </el-col>
                    <el-col :span="4">
                            <el-affix position="top" :offset="81">
                        <div>

                            <el-card class="box-card" style="height:250px">
                                <template #header>
                                    <div class="card-header">
                                        <span>站点信息
                                        </span>
                                    </div>
                                </template>
                                <div class="card-header-content">
                                    <div class="card-header-headinfo">
                                        建站日期：
                                    </div>2022年11月25日
                                    <hr>
                                    <el-tooltip effect="dark" content="基于Golang,Vue3,Gin,Gorm,MySQL8和Element-PlusUI制作的网站" placement="top">
                                        <div class="card-header-headinfo">技术栈：</div>
                                    </el-tooltip>
                                    Golang+Vue3前后端分离
                                    <hr>
                                    <div class="card-header-headinfo">文章统计：</div>目前有 0 篇文章
                                    </div>
                                    </el-card>
                                
                                    <br>

                                    <el-card class="box-card-my" style="height:200px">
                                        <template #header>
                                            <div class="card-header">
                                        <span>我
                                        </span>
                                    </div>
                                    <div class="card-header-my">
                                        <div class="card-header-my-profilePhoto">
                                            <el-avatar
                                                src="https://img0.baidu.com/it/u=3495979613,232867632&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400" />
                                        </div>

                                        <div class="card-header-my-fullname" >
                                            {{ user.fullname }}
                                        </div>
                                        <span class="card-header-my-content">
                                            <el-tag effect="dark">
                                                等级：{{ user.level }}
                                            </el-tag>
                                        </span>
                                    </div>
                                </template>
                                <div class="card-header-my-content">
                                    <span>文章 {{ user.blogAmount }}
                                    </span>
                                    <el-divider direction="vertical" />
                                    <span>收藏 {{ user.collectAmount }}
                                    </span>
                                    <el-divider direction="vertical" />
                                    <span>被赞 {{ user.thumbUpAmount }}
                                    </span>
                                </div>
                            </el-card>
                    </div>
                </el-affix>
                    </el-col>
                    <el-col :span="2">
  <el-backtop :right="240" :bottom="80" style="height:40px"/>
                    </el-col>
                </el-row>

            </el-main>
            <el-footer>

            </el-footer>
        </el-container>
    </div>
</template>


<script>
import router from '@/router'
import { getBlogEssayAndUser, getrank } from '@/api/user'
//import user from '@/store/moduels/user'


export default {
    name: "UserIndex",
    data() {
        return {
            blogShowTabs: 'newsBlog',
            feedbackDialogVisible: false,
            feedback: {
                question: '',
                email: '',
            },
            user: {
                profilePhoto: '',
                fullname: 'FxShadow',
                phoneNumber: '',
                blogAmount: 0,
                collectAmount: 0,
                thumbUpAmount: 0,
                level: '1',
                money: '100',
            },
            msg: {},
            userList: [],
            blogList: [],
            navigationImageList: [
                { id: 0, idView: require("@/assets/01.png") },
                { id: 1, idView: require("@/assets/02.png") },
            ]
        }
    },
    methods: {
        //跳转回主页
        toSystemIndex() {
            router.push("/SystemIndex")
        },
        //设置默认头像为用户名第一个字符
        profilePhotoUpdate() {
            this.user.profilePhoto = this.user.fullname.charAt(0)
            console.log(this.user.profilePhoto)
        },
        initUserList() {
            //发送axios请求
            getrank(this.userList).then(res => {

                //神秘操作取出后端里的Message里的data
                var dataJSON = JSON.parse(JSON.stringify(res.data))
                var dataList = JSON.parse(dataJSON.data)

                this.userList = dataList.userList
                console.log("解析请求中")
                console.log(this.userList)
                setTimeout(() => {
                    console.log("解析完成")
                }, 10)

                return res.data

            }).catch(err => {
                console.log(err)
            }).finally(() => {
                setTimeout(() => {
                    //初始化用户排行榜列表
                    this.initRankVerify()
                }, 1000)
            })
        },
        //初始化排行榜验证
        initRankVerify() {
            if (this.msg.Code === "200") {
                console.log("initRankVerify ok")

                return true
            } else if (this.msg.Code === "401") {
                console.log("initRankVerify fail")
            }
        },
        initBlogList() {
            //发送axios请求
            getBlogEssayAndUser(this.blogList).then(res => {
                var dataJSON = JSON.parse(JSON.stringify(res.data))
                var dataList = JSON.parse(dataJSON.data)

                var userInDataList = dataList.User
                var blogInDataList = dataList.blog_essay

                for (let blog in blogInDataList) {
                    for (let user in userInDataList) {
                        if (blogInDataList[blog].user_id == userInDataList[user].UID) {
                            blogInDataList[blog].user = (userInDataList[user])
                            this.blogList.push(blogInDataList[blog])
                        }
                    }
                }

                console.log("getBlogEssay:解析请求中")
                //console.log(this.blogList)
                setTimeout(() => {
                    console.log("getBlogEssay:解析完成")
                }, 10)

                return res.data

            }).catch(err => {
                console.log(err)
            }).finally(() => {
                setTimeout(() => {
                    //等待
                    //this.initVerify()
                }, 1000)
            })
        },
        blogClick() {
            console.log("6666")
        }
    },
    mounted() {
        this.$nextTick(() => {
            console.log("页面加载完啦~")
            this.profilePhotoUpdate()
            //初始化页面数据
            this.initUserList()
            this.initBlogList()
        })

    }
}
</script>


<style scoped>
body {
    height: 100%
}

div {
    height: 100%
}

.common-layout {
    background-color: #44c2fd;
}

el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
    text-align: center;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}

.flex-grow {
    flex-grow: 1;
}

.demo-type {
    display: flex;
}

.demo-type>div {
    flex: 1;
    text-align: center;
}

.demo-type>div:not(:last-child) {
    border-right: 1px solid var(--el-border-color);
}

.dialog-footer button:first-child {
    margin-right: 10px;
}

.el-row {
    margin-bottom: 20px;
}

.el-row:last-child {
    margin-bottom: 0;
}

.el-col {
    border-radius: 4px;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.box-card {
    width: 200px;
}

.card-header-content {
    font-size: small;
}

.box-card-my {
    width: 200px;
}

.card-header-my-content {
    font-size: smaller;
}

.card-header-headinfo {
    font-size: small;
    font-weight: bold;
}

.newsBlog{
    font-size: 32px;
    font-weight: 600;
}

.newsBlog-container{
    position: relative;
    box-shadow: 2px 2px 8px #50505080;
}
</style>